<template>
  <div class="channel-main">
    <div class="channel-title">
      <div class="title">智慧船闸</div>
      <div class="time">
        <img src="../../static/images/icon-time.png" alt="" />
        <span>{{ currentYearMonth1 }}-{{ currentYearMonth2 }}</span>
      </div>
    </div>
    <div class="unit">单位:座</div>
    <div class="item-list">
      <div class="item">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">全省船闸概览</div>
          <div class="icon">
            <img src="../../static/images/Subtract.png" alt="" @click="handleShow('first')" />
          </div>
        </div>
        <div class="line"></div>        
        <div class="amount">
          <div class="info">
            <img src="../../static/images/ship-lock-bg-icon.png" alt="">
            <div class="detail">
              <div class="name">全省船闸总数</div>
              <div class="value">{{ totalData.shipLockSum }}</div>
            </div>
          </div>       
        </div>
        <div class="amount-content">
          <div>
            <div class="name">航道部门维护船闸数</div>
            <div class="num">{{ totalData.departmentShipLockSum || '' }}</div>
          </div>
          <div class="line-box"></div>
          <div>
            <div class="name">其他部门管理船闸数</div>
            <div class="num">{{ totalData.localUnitShipLockSum || '' }}</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">船闸维护所属航道部门</div>
          <div class="icon">
            <img src="../../static/images/Subtract.png" alt="" @click="handleShow('second')" />
          </div>
        </div>

        <div class="line"></div>
        <div class="chart" id="pie-chart1"></div>
        <div class="frist-table">
          <div class="frist-thead">
            <div class="frist-tr">
              <div class="frist-td">区域中心</div>
              <div class="frist-td">维护船闸个数</div>
              <div class="frist-td">占维护船闸<br>总数比例</div>
            </div>
          </div>
          <div class="frist-tbody">
            <div class="frist-tr" v-for="item in seriesData1" :key="item.region">
              <div class="frist-td" style="display:flex;align-items: center;margin-left: 20px;">
                <span class="li" :style="`background:${item.color}`"></span>{{ item.name }}
              </div>
              <div class="frist-td">{{ item.value }}</div>
              <div class="frist-td">{{ Number(item.rate)*100 }}%</div>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="item">
        <div class="item-title">基础数据</div>
        <div class="line"></div>
        <div class="chart-title">船闸基础信息分析</div>
        <div class="staticTable">          
          <table cellspacing="0" border="0" cellpadding="0">
            <thead>
              <tr>
                <th>船闸编号</th>
                <th>船闸名称</th>
                <th>所在航道</th>
                <th>所在位置</th>
                <th>尺寸规格</th>
                <th>船闸等级</th>
                <th>船闸类型</th>
                <th>当前状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in lockBaseData" :key="index">
                <td>{{ item.czbh }}</td>
                <td>{{ item.czmc }}</td>
                <td>{{ item.szhd }}</td>
                <td>{{ item.szwz }}</td>
                <td>{{ item.ccgg }}</td>
                <td>{{ item.czjb }}</td>
                <td>{{ item.czlx }}</td>
                <td>{{ item.dqzt }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div> -->
      <div class="item">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">船闸过闸详情</div>
          <div class="icon">
            <img src="../../static/images/Subtract.png" alt="" @click="handleShow('third')" />
          </div>
        </div>
        <div class="line"></div>
        <div class="choose-box">
          <div
            :class="controlCurTime === 1 ? 'choose-active' : 'choose-item'"
            @click="getTime(1)"
          >
            当日统计
          </div>
          <div
            :class="controlCurTime === 2 ? 'choose-active' : 'choose-item'"
            @click="getTime(2)"
          >
            当月统计
          </div>
          <div
            :class="controlCurTime === 3 ? 'choose-active' : 'choose-item'"
            @click="getTime(3)"
          >
            当年统计
          </div>
        </div>
        <div class="table-box">
          <div class="table" style="margin-top: 20px; width: 750px">
            <table
              style="border-collapse: collapse"
              cellspacing="0"
              cellpadding="0"
            >
              <thead style="position: sticky;top: 0px;background-color: #fff;z-index: 3;">
                <tr>
                  <th style="width: 30px;"></th>
                  <th
                    style="width: 150px"
                    v-for="item in twoTableTitle"
                    :key="item"
                  >
                    {{ item }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in twoTableData" :key="index">
                  <td style="width: 30px;">
                    <input type="radio" :checked="isChecked===index?true:false" @click="handleChecked(index,item)">
                  </td>
                  <td style="width: 150px">{{ item.shipLockName }}</td>
                  <td style="width: 150px">{{ item.cumulativeOverLoadedTon }}</td>
                  <td style="width: 150px">{{ item.passShipLockNum }}</td>
                  <td style="width: 150px">{{ item.upCount }}</td>
                  <td style="width: 150px">{{ item.downCount }}</td>                  
                  <td style="width: 150px">{{ item.averageTimePass }}</td>
                  <!-- <td style="width: 150px">{{ item.averageTimeWait }}</td> -->
                </tr>
              </tbody>
            </table>
          </div>          
        </div>
        <div class="content-bottom">
          <div class="bottom">
            <div class="name">{{ currentName }}过货总数（吨）</div>
            <div class="num">{{ cumulativeOverLoadedTon }}</div>
          </div>
          <div class="bottom">
            <div class="name">{{ currentName }}过闸船舶数（艘）</div>
            <div class="num">{{ passShipLockNum }}</div>
          </div>
        </div>
      </div>
      <div class="item">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">船闸过闸趋势分析</div>
          <div class="icon">
            <img src="../../static/images/Subtract.png" alt="" @click="handleShow('fourth')" />
          </div>
        </div>
        <div class="line"></div>

        <div class="chart-title" style="margin-bottom: 10px">
          北江船闸累计过货趋势图
        </div>
        <div class="choose">
          <div class="left">
            <div class="option">
              <div @click="getGoodsFirstYearList">
                <input
                  class="choose-input"
                  type="text"
                  placeholder=""
                  readonly="readonly"
                  v-model="goodsYear1"                  
                />
                <van-icon :name="showGoodsFirstYear?'arrow-up':'arrow-down'" size="14" style="position: absolute;right: 2%;top: 20%;" />
              </div>              
              <div class="choose-list" v-show="showGoodsFirstYear">
                <div class="list">
                  <li
                    @click="setGoodsFristYear(item)"
                    v-for="item in goodsFirstYearList"
                    :key="item"
                  >
                    {{ item }}
                  </li>
                </div>
                <div class="jt"></div>
              </div>
            </div>
          </div>
          <div style="margin-left:8px">VS</div>
          <div class="right">
            <div class="option">
              <div @click="getGoodsSecondYearList">
                <input
                  class="choose-input"
                  type="text"
                  placeholder=""
                  readonly="readonly"
                  v-model="goodsYear2"                  
                />
                <van-icon :name="showGoodsSecondYear?'arrow-up':'arrow-down'" size="14" style="position: absolute;right: 2%;top: 20%;" />
              </div>             
              <div class="choose-list" v-show="showGoodsSecondYear">
                <div class="list">
                  <li
                    @click="setGoodsSecondYear(item)"
                    v-for="item in goodsSecondYearList"
                    :key="item"
                  >
                    {{ item }}
                  </li>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="bar-chart1" class="chart"></div>
        <div class="chart-title" style="margin-bottom: 10px">
          北江船闸累计过闸数趋势图
        </div>
        <div class="choose">
          <div class="left">
            <div class="option">
              <div @click="getsluiceFirstYearList">
                <input
                  class="choose-input"
                  type="text"
                  placeholder=""
                  readonly="readonly"
                  v-model="sluiceYear1"                 
                />
                <van-icon :name="showSluiceFirstYear?'arrow-up':'arrow-down'" size="14" style="position: absolute;right: 2%;top: 20%;" />
              </div>              
              <div class="choose-list" v-show="showSluiceFirstYear">
                <div class="list">
                  <li
                    @click="setSluiceFristYear(item)"
                    v-for="item in sluiceFirstYearList"
                    :key="item"
                  >
                    {{ item }}
                  </li>
                </div>
                <div class="jt"></div>
              </div>
            </div>
          </div>
          <div style="margin-left:8px">VS</div>
          <div class="right">
            <div class="option">
              <div @click="getsluiceSecondYearList">
                <input
                  class="choose-input"
                  type="text"
                  placeholder=""
                  readonly="readonly"
                  v-model="sluiceYear2"                  
                />
                <van-icon :name="showSluiceSecondYear?'arrow-up':'arrow-down'" size="14" style="position: absolute;right: 2%;top: 20%;" />
              </div>             
              <div class="choose-list" v-show="showSluiceSecondYear">
                <div class="list">
                  <li
                    @click="setSluiceSecondYear(item)"
                    v-for="item in sluiceSecondYearList"
                    :key="item"
                  >
                    {{ item }}
                  </li>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="bar-chart2" class="chart"></div>
      </div>
      <div class="item">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <div class="item-title">过闸货源分析</div>
          <div class="icon">
            <img src="../../static/images/Subtract.png" alt="" @click="handleShow('')" />
          </div>
        </div>
        <div class="line"></div>
        <div class="chart-title" style="margin-bottom: 10px">
          北江船闸货源结构图
        </div>
        <div class="choose-box">
          <div
            :class="controlCurTime2 === 1 ? 'choose-active' : 'choose-item'"
            @click="getTime2(1)"
          >
            昨日统计
          </div>
          <div
            :class="controlCurTime2 === 2 ? 'choose-active' : 'choose-item'"
            @click="getTime2(2)"
          >
            上月统计
          </div>
          <div
            :class="controlCurTime2 === 3 ? 'choose-active' : 'choose-item'"
            @click="getTime2(3)"
          >
            上年统计
          </div>
        </div>

        <div class="chart" id="pie-chart2"></div>
        <div class="two-table">
          <div class="two-tbody">
            <div class="two-tr" v-for="(item,index) in seriesData2" :key="index">
              <div style="display: flex;align-items: center;justify-content: space-between;">
                <div class="li" :style="`background:${item.itemStyle?item.itemStyle.color:''}`"></div>
                <div class="two-td">{{ item.name }}</div>
              </div>       
              <div class="two-td">{{ item.value }}%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="source">
      <div class="name">广东省交通运输厅</div>
      <div class="name">数据来源：广东省航道事务中心</div>
    </div> 
    <!-- 弹窗 -->    
    <van-dialog 
      v-model:show="isShow" 
      confirm-button-text="我知道了" 
      confirm-button-color="#2D78ED"
    >
      <div v-for="(item,index) in dialogContent" :key="index">
        <div class="dialog-title">{{ item.title }}</div>
        <div class="dialog-content">{{ item.content }}</div>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";

import { 
  getShipLockNum, //全省船闸概览
  getShipLockRate, //获取船闸维护所属航道部门比例数据
  getShipLockDetail, //船闸过闸详情
  analysisData, //船闸过闸趋势分析
  goodsAnalysisChart, //过闸货源分析图
  getYearList, //获取年份列表
  lockBase, //基础数据
} from "../../utils/apis";

import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  ToolboxComponent,
  GridComponent,
  DataZoomComponent,
} from "echarts/components";
import { PieChart, BarChart, LineChart } from "echarts/charts";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { showToast } from "vant";

echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  GridComponent,
  BarChart,
  LineChart,
  DataZoomComponent,
]);

// 全省船闸概览
const totalData = ref({});
const getShipLockNumFn = () => {
  getShipLockNum().then((res) => {
    if (res.code === 200 && res.data.length) {
      totalData.value = res.data[0];
    }
  });
};
// 获取船闸维护所属航道部门比例数据
const rateData = ref([]);
const seriesData1 = ref([]);
const colorList=ref([
{color: '#6B9BFD'},
{color: '#af71db'},
{color: '#ffa257'},
{color:'#135ddf'},
{color:'#0e8a89'},
{color:'#ffcb32'},
{color:'#4ed9a0'},
{color:'#165dff'},
// {color:'#67cdf7'},
// {color:'#67c577'},
// {color:'#13cdff'},
// {color:'#91cc75'},
// {color:'#99cdff'},
// {color:'#36cdff'},
])
const getShipLockRateFn = () => {
  getShipLockRate().then((res) => {
    if (res.code === 200 && res.data.length) {
      rateData.value = res.data;
      let arr = [];
      for (let i = 0; i < res.data.length; i++) {
        const el = res.data[i];
        let obj = {};
        obj.name = el.region;
        obj.value = el.maintenanceOfShiplock;
        obj.rate=el.maintenanceShipLocksRate
        let colorItem={color:''}
        colorItem.color=colorList.value[i].color
        obj.itemStyle=colorItem
        obj.color=colorList.value[i].color
        arr.push(obj);
      }
      seriesData1.value = arr;    
      initPieChart1();      
    }
  });
};
const initPieChart1 = () => {
  let pieChart1 = echarts.getInstanceByDom(
    document.getElementById("pie-chart1")
  );
  if (pieChart1 == null) {
    pieChart1 = echarts.init(document.getElementById("pie-chart1"));
  }
  let option;
  option = {
    tooltip: {
      trigger: "item",
      confine: true, //限制在图表区域内
      formatter: "{b} : {c}个",
    },
    series: [
      {
        name: "", // 将name设置为空字符串
        type: "pie",
        radius: "65%",
        center: ["50%", "50%"],
        radius: ["40%", "70%"], //设置成环状
        selectedMode: "single", //设置饼图的选中模式为单选模式
        data: seriesData1.value,
        label: {
          show: false, //每个扇区上显示文字标签
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        labelLine: {
          show: false, //标签连接线
        },
      },
    ],
  };

  option && pieChart1.setOption(option);
};

// 船闸过闸详情
const twoTableTitle = ref([
  "船闸名称",
  "累计过货（吨）",
  "过闸船舶总数（艘）",
  "累计上行数量（艘）",
  "累计下行数量（艘）",  
  "平均过闸时间（分）",
  // "平均候闸时间（分）",
]);
const controlCurTime = ref(2);
const timeType1 = ref("");
const timeValue1 = ref("");
const isChecked = ref(0);
const getTime = (val) => {
  controlCurTime.value = val;
  let currentDay = new Date().format("yyyy-MM-dd");
  let currentMonth = new Date().format("yyyy-MM");
  let currentYear = new Date().format("yyyy");
  if(val == 1){
    timeType1.value = "日";
    timeValue1.value = currentDay;
  }else if(val == 2){
    timeType1.value = "月";
    timeValue1.value = currentMonth;
  }else if(val == 3){
    timeType1.value = "年";
    timeValue1.value = currentYear;
  }
  isChecked.value = 0;
  getShipLockDetailFn();
};
const cumulativeOverLoadedTon = ref("");
const passShipLockNum = ref("");
const currentName = ref("");
const twoTableData = ref([]);
const getShipLockDetailFn = () => {
  twoTableData.value = [];
  cumulativeOverLoadedTon.value = "";
  passShipLockNum.value = "";
  currentName.value = "";
  getShipLockDetail(timeType1.value,timeValue1.value).then((res) => {
    if(res.code === 200 && res.data.length){
      cumulativeOverLoadedTon.value = res.data[0].cumulativeOverLoadedTon;
      passShipLockNum.value = res.data[0].passShipLockNum;
      currentName.value = res.data[0].shipLockName === "总计"?"北江船闸":res.data[0].shipLockName;
      twoTableData.value = res.data;      
    }
  });
};
const handleChecked = (index,item) => {
  isChecked.value = index;
  cumulativeOverLoadedTon.value = item.cumulativeOverLoadedTon;
  passShipLockNum.value = item.passShipLockNum;  
  currentName.value = item.shipLockName === "总计"?"北江船闸":item.shipLockName;
};

// 北江船闸过货年份第一个
const showGoodsFirstYear = ref(false);
const goodsYear1 = ref("");
const goodsFirstYearList = ref([]);
const setGoodsFristYear = (item) => {
  if(item.slice(0,4) > goodsYear2.value.slice(0,4)){
    showToast("开始年份不能大于结束年份");
    return;
  }
  goodsYear1.value = item;
  analysisDataFn1();
  showGoodsFirstYear.value = false;
};
const getGoodsFirstYearList = () => {
  showGoodsFirstYear.value = !showGoodsFirstYear.value;
  showGoodsSecondYear.value = false;
};
// 北江船闸过货年份第二个
const showGoodsSecondYear = ref(false);
const goodsYear2 = ref("");
const goodsSecondYearList = ref([]);
const setGoodsSecondYear = (item) => {
  if(item.slice(0,4) < goodsYear1.value.slice(0,4)){
    showToast("结束年份不能小于开始年份");
    return;
  }
  goodsYear2.value = item;
  analysisDataFn1();
  showGoodsSecondYear.value = false;
};
const getGoodsSecondYearList = () => {
  showGoodsSecondYear.value = !showGoodsSecondYear.value;
  showGoodsFirstYear.value = false;
};
// 北江船闸过闸年份第一个
const showSluiceFirstYear = ref(false);
const sluiceYear1 = ref("");
const sluiceFirstYearList = ref([]);
const setSluiceFristYear = (item) => {
  if(item.slice(0,4) > sluiceYear2.value.slice(0,4)){
    showToast("开始年份不能大于结束年份");
    return;
  }
  sluiceYear1.value = item;
  analysisDataFn2();
  showSluiceFirstYear.value = false;
};
const getsluiceFirstYearList = () => {
  showSluiceFirstYear.value = !showSluiceFirstYear.value;
  showSluiceSecondYear.value = false;
};
// 北江船闸过闸年份第二个
const showSluiceSecondYear = ref(false);
const sluiceYear2 = ref("");
const sluiceSecondYearList = ref([]);
const setSluiceSecondYear = (item) => {
  if(item.slice(0,4) <= sluiceYear1.value.slice(0,4)){
    showToast("结束年份不能小于开始年份");
    return;
  }
  sluiceYear2.value = item;
  analysisDataFn2();
  showSluiceSecondYear.value = false;
};
const getsluiceSecondYearList = () => {
  showSluiceSecondYear.value = !showSluiceSecondYear.value;
  showSluiceFirstYear.value = false;
};

// 船闸过闸趋势分析
const seriesBarChart1 = ref([]);
const seriesBarChart2 = ref([]);
const analysisDataFn1 = () => {
  analysisData(goodsYear1.value.slice(0,4),goodsYear2.value.slice(0,4)).then((res) => {
    if(res.code === 200 && res.data){
      let arr1 = [0,0,0,0,0,0,0,0,0,0,0,0];
      let arr2 = [0,0,0,0,0,0,0,0,0,0,0,0];
      let arr3 = ["","","","","","","","","","","",""];
      let monthData = [];
      res.data.monthList.forEach((item) => {
        let month = item.slice(0,1) == "0"?item.slice(1,2)-1:item.slice(0,2)-1;
        monthData.push(month);
      });
      monthData.forEach((item,index) => {
        res.data.goodsSumYear1.forEach((item1,index1) => {
          if(index === index1){
            arr1[item] = item1;
          }
        });
        res.data.goodSumYear2.forEach((item2,index2) => {
          if(index === index2){
            arr2[item] = item2;
          }
        });
        res.data.goodsGrowThrate.forEach((item3,index3) => {
          if(index === index3){
            arr3[item] = item3;
          }
        });
      });
      seriesBarChart1.value = [
        {
          name: `${goodsYear1.value}累积`,
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              if(value || value == 0){
                return value + " 吨";
              }             
            },
            confine: true, //限制在图表区域内
          },
          barWidth: 5,
          itemStyle: {
            color: '#6B9BFD'
          },
          data: arr1,
        },
        {
          name: `${goodsYear2.value}累积`,
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              if(value || value == 0){
                return value + " 吨";
              }   
            },
            confine: true, //限制在图表区域内
          },
          barWidth: 5,
          itemStyle: {
            color: '#6FE1B2'
          },
          data: arr2,
        },
        {
          name: `${goodsYear2.value}同比增长率`,
          type: "line",
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              if(value || value == 0){
                return value + " %";
              }             
            },
            confine: true, //限制在图表区域内
          },
          itemStyle: {
            color: '#FFA257'
          },
          data: arr3,
        },
      ];
      initBarChart1();
    }
  });
};
const initBarChart1 = () => {
  let barChart1 = echarts.getInstanceByDom(
    document.getElementById("bar-chart1")
  );
  if (barChart1 == null) {
    barChart1 = echarts.init(document.getElementById("bar-chart1"));
  }
  let option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      itemWidth: 10, // 设置图例项的宽度
      itemHeight: 10, // 设置图例项的高度
      textStyle: {
        fontSize: "12px",
        color: "rgba(0,0,0,0.85)",
      },
      itemGap: 4,
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10
    },
    grid: {
      left: "5%",
      right: "4%",
      bottom: "15%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        maxValueSpan: 30,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        // data: xAxisBarChart1.value,
        data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        axisPointer: {
          type: "shadow",
        },   
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
         axisLabel:{
          interval: 0,
          formatter: function (value) {
            //x轴的文字改为竖版显示
            let str=value
            let month = str.slice(0, -1); 
            let suffix = str.slice(-1); 
            return `${month}\n${suffix}`
          }
        },     
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "货物量（吨）",
        nameTextStyle: {
          padding: [0,0,0,-50],
        }
        // min: 0,
        // max: 250,
        // interval: 50,
        // axisLabel: {
        //   formatter: "{value} ml",
        // },
      },
      {
        type: "value",
        name: "增长率",
        // min: 0,
        // max: 25,
        // interval: 5,
        axisLabel: {
          formatter: "{value} %",
        },
        nameTextStyle: {
          padding: [0,-40,0,0],
        }
      },
    ],
    series: seriesBarChart1.value,
  };

  option && barChart1.setOption(option);
};
const analysisDataFn2 = () => {
  analysisData(sluiceYear1.value.slice(0,4),sluiceYear2.value.slice(0,4)).then((res) => {
    if(res.code === 200 && res.data){
      let arr1 = [0,0,0,0,0,0,0,0,0,0,0,0];
      let arr2 = [0,0,0,0,0,0,0,0,0,0,0,0];
      let arr3 = ["","","","","","","","","","","",""];
      let monthData = [];
      res.data.monthList.forEach((item) => {
        let month = item.slice(0,1) == "0"?item.slice(1,2)-1:item.slice(0,2)-1;
        monthData.push(month);
      });
      monthData.forEach((item,index) => {
        res.data.shipPassSumYear1.forEach((item1,index1) => {
          if(index === index1){
            arr1[item] = item1;
          }
        });
        res.data.shipPassSumYear2.forEach((item2,index2) => {
          if(index === index2){
            arr2[item] = item2;
          }
        });
        res.data.shipPassGrowThrate.forEach((item3,index3) => {
          if(index === index3){
            arr3[item] = item3;
          }
        });
      });
      seriesBarChart2.value = [
        {
          name: `${sluiceYear1.value}累积`,
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              if(value || value == 0){
                return value + " 艘";
              }  
            },
            confine: true, //限制在图表区域内
          },
          barWidth: 5,
          itemStyle: {
            color: '#6B9BFD'
          },
          data: arr1,
        },
        {
          name: `${sluiceYear2.value}累积`,
          type: "bar",
          tooltip: {
            valueFormatter: function (value) {
              if(value || value == 0){
                return value + " 艘";
              }             
            },
            confine: true, //限制在图表区域内
          },
          barWidth: 5,
          itemStyle: {
            color: '#6FE1B2'
          },
          data: arr2,
        },
        {
          name: `${sluiceYear2.value}同比增长率`,
          type: "line",
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function (value) {
              if(value || value == 0){
                return value + " %";
              }
            },
            confine: true, //限制在图表区域内
          },
          itemStyle: {
            color: '#FFA257'
          },
          data: arr3,
        },
      ];
      initBarChart2();
    }
  });
};
const initBarChart2 = () => {
  let barChart2 = echarts.getInstanceByDom(
    document.getElementById("bar-chart2")
  );
  if (barChart2 == null) {
    barChart2 = echarts.init(document.getElementById("bar-chart2"));
  }
  let option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
        },
      },
      confine: true, //限制在图表区域内
    },
    legend: {
      itemWidth: 10, // 设置图例项的宽度
      itemHeight: 10, // 设置图例项的高度
      textStyle: {
        fontSize: "12px",
        color: "rgba(0,0,0,0.85)",
      },
      itemGap: 4,
      icon: 'circle',
      itemWidth: 10,
      itemHeight: 10
    },
    grid: {
      left: "5%",
      right: "4%",
      bottom: "15%",
      containLabel: true,
    },
    dataZoom: [
      {
        show: false,
        type: "inside",
        maxValueSpan: 30,
        zoomLock: false,
      },
    ],
    xAxis: [
      {
        type: "category",
        // data: xAxisBarChart2.value,
        data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
        axisPointer: {
          type: "shadow",
        },
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        axisLabel:{
          interval: 0,
          formatter: function (value) {
            //x轴的文字改为竖版显示
            let str=value
            let month = str.slice(0, -1); 
            let suffix = str.slice(-1); 
            return `${month}\n${suffix}`
          }
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "过闸船舶数（艘）",
        // min: 0,
        // max: 250,
        // interval: 50,
        // axisLabel: {
        //   formatter: "{value} ml",
        // },        
      },
      {
        type: "value",
        name: "增长率",
        // min: 0,
        // max: 25,
        // interval: 5,
        axisLabel: {
          formatter: "{value} %",
        },
        nameTextStyle: {
          padding: [0,-40,0,0],
        }
      },
    ],
    series: seriesBarChart2.value,
  };

  option && barChart2.setOption(option);
};

// 过闸货源分析
const controlCurTime2 = ref(2);
const timeType2 = ref("");
const timeValue2 = ref("");
const getTime2 = (val) => {
  controlCurTime2.value = val;  
  let lastDay = new Date(new Date().getTime() - 1 * 24 * 3600 * 1000).format("yyyy-MM-dd");

  let date = new Date; 
  let year = date.getFullYear();
  let month = date.getMonth();
  if(month == 0){
    year = year -1;
    month = 12; 
  }
  if(month < 10){
    month = "0" + month;
  }
  if(val == 1){
    timeType2.value = "日";
    timeValue2.value = lastDay;
  }else if(val == 2){
    timeType2.value = "月";
    timeValue2.value = `${year}-${month}`;
  }else if(val == 3){
    timeType2.value = "年";
    timeValue2.value = date.getMonth()== 0?year:year-1;
  }
  goodsAnalysisChartFn();
};
const goodsData = ref([]);
const seriesData2 = ref([]);

const goodsAnalysisChartFn = () => {
  goodsAnalysisChart(timeType2.value,timeValue2.value).then((res) => {
    goodsData.value = [];
    seriesData2.value = [];
    if(res.code === 200 && res.data){
      let arr = [];
      let colorData = [
        '#6B9BFD','#af71db','#ffa257','#135ddf','#0e8a89','#ffcb32','#4ed9a0','#67cdf7','#67c577','#13cdff',
        '#91cc75','#99cdff','#10757C','#C8778E','#D4B6F4','#8F7059','#EDD18C','#CA3F54','#01448B','#165dff',
        '#FFFF33','#B22222','#FFB6C1','#4B0082','#DDA0DD','#E6E6FA','#F08080','#483D8B','#40E0D0','#330033', 
        '#996666','#996699','#EE0000','#6666FF','#660099','#666699','#0000FF','#FF9933','#CC33CC','#003333',               
      ];
      res.data.cargoType.forEach((item,index) => {
        let obj = {};
        obj.name = item;
        obj.value = res.data.cargoPrecent[index];
        obj.itemStyle = { 
          color: colorData[index]
        };
        arr.push(obj);
      });
      let other = {};
      arr.forEach((item,index) => {
        if(item.name === "其他"){
          other = item;
          arr.splice(index,1);
          return;
        }
      });
      arr.push(other);
      seriesData2.value = arr;
      initPieChart2(); 
    }
  });
};
const initPieChart2 = () => {
  let pieChart2 = echarts.getInstanceByDom(
    document.getElementById("pie-chart2")
  );
  if (pieChart2 == null) {
    pieChart2 = echarts.init(document.getElementById("pie-chart2"));
  }
  let option;
  option = {
    tooltip: {
      trigger: "item",
      confine: true, //限制在图表区域内
      formatter: "{b} : {c}%",
    },
    series: [
      {
        name: "", // 将 name 设置为空字符串
        type: "pie",
        radius: "65%",
        center: ["50%", "50%"],
        radius: ["40%", "70%"], //设置成环状
        selectedMode: "single",
        data: seriesData2.value,
        label: {
          show: false, //每个扇区上显示文字标签
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        labelLine: {
          show: false, //标签连接线
        },
      },
    ],
  };

  option && pieChart2.setOption(option);
};

// 弹窗
const isShow = ref(false);
const dialogContent = ref([]);
const handleShow = (val) => {
  //隐藏echarts tooltip
  let pieChart1 = echarts.getInstanceByDom(document.getElementById("pie-chart1"));
  pieChart1.dispatchAction({
    type: 'hideTip'
  });
  let pieChart2 = echarts.getInstanceByDom(document.getElementById("pie-chart2"));
  pieChart2.dispatchAction({
    type: 'hideTip'
  });
  let barChart1 = echarts.getInstanceByDom(document.getElementById("bar-chart1") );
  barChart1.dispatchAction({
    type: 'hideTip'
  });
  let barChart2 = echarts.getInstanceByDom(document.getElementById("bar-chart2"));
  barChart2.dispatchAction({
    type: 'hideTip'
  });

  if(val === "first"){
    dialogContent.value = [
      {
        title: "全省船闸总数",
        content: "航道部门维护的船闸总数153座（航道维护船闸总数26座+其他单位维护船闸数127座）"
      },
      {
        title: "其他部门管理船闸数",
        content: "其他部门管理的船闸总数"
      }
    ];
  }else if(val === "second"){
    dialogContent.value = [
      {
        title: "航道维护船闸总数",
        content: "航道部门维护的船闸总数（实现按区域中心进行展示）"
      }
    ];
  }else if(val === "third"){
    dialogContent.value = [
      {
        title: "北江船闸系统船闸数",
        content: "纳入北江船闸系统的船闸总数（注：明细【属性信息项】：船闸名称、当日过闸船舶总数、当日上行船舶数、当日下行船舶数、当日过货总数(吨)、当日平均过闸时间、当日平均候闸时间【目前四库未从北江船闸系统接入，待进一步跟进接入时间】）（按年/月/日的时间维度进行筛选）"
      },
      {
        title: "北江船闸过闸船舶数",
        content: "北江船闸月度船舶过闸总数（按年/月/日的时间维度、单座船闸和多座船闸合计进行筛选）"
      },
      {
        title: "北江船闸过货总数（吨）",
        content: "北江船闸月度过闸载货总吨量（吨）（按年/月/日的时间维度、单座船闸和多座船闸合计进行筛选）"
      }
    ];
  }else if(val === "fourth"){
    dialogContent.value = [
      {
        title: "北江船闸过闸船舶累计数同比",
        content: "北江船闸（单座、多座合计）每月、季度、年度过闸船舶累计数同比"
      },
      {
        title: "北江船闸船闸过货累计数同比",
        content: "北江船闸（单座、多座合计）每月、季度、年度过闸船舶过货累计数同比"
      }
    ];
  }else{
    dialogContent.value = [
      {
        title: "北江船闸货源类型数量",
        content: "按年、季、月的时间维度统计北江船闸不同货源类型的数量，实现按年/月/日筛选功能"
      }
    ];
  }    
  isShow.value = true;
};

//获取日期
const currentYearMonth1 = ref("");
const currentYearMonth2 = ref("");

//智慧船闸基础数据
const lockBaseData = ref([]);
const lockBaseFn = () => {
  lockBase().then((res) => {
    if(res.code === 200 && res.data.length){
      lockBaseData.value = res.data;
    }
  });
};

onMounted(() => {  
  if(sessionStorage.getItem("watermarkTxt")){
    //加水印
    watermark.init({ 
      watermark_x: -30, // 水印起始位置x轴坐标
      watermark_y: -20, // 水印起始位置Y轴坐标
      watermark_x_space: 20, // 水印x轴间隔
      watermark_y_space: 80, // 水印y轴间隔
      watermark_alpha: 0.07, // 水印透明度
      watermark_fontsize: '14px', // 水印字体大小
      watermark_width: 100, // 水印宽度
      watermark_height: 30,
      watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
      watermark_angle: 25, // 水印倾斜度数
      watermark_rows: 0, // 水印行数
      watermark_cols: 0, // 水印列数
      watermark_font: '微软雅黑', // 水印字体
      watermark_color: 'black', // 水印字体颜色 
    });
  }

  currentYearMonth1.value = new Date().getFullYear() + ".01";
  currentYearMonth2.value = new Date().format("yyyy.MM");

  timeType1.value = "月";
  timeValue1.value = new Date().format("yyyy-MM");

  timeType2.value = "月";
  let date = new Date; 
  let year = date.getFullYear();
  let month = date.getMonth();
  if(month == 0){
    year = year -1;
    month = 12; 
  }
  if(month < 10){
    month = "0" + month;
  }
  timeValue2.value = `${year}-${month}`;

  getYearList().then((res) => {
    if(res.code === 200 && res.data.length){
      let arr1 = [];
      let arr2 = [];
      res.data.forEach((item,index) => {
        if(index < res.data.length-1){
          arr1.push(`${item.year}年`);
        }
        arr2.push(`${item.year}年`);
      });

      goodsYear1.value = arr1[arr1.length-1];
      goodsYear2.value = arr2[arr2.length-1];
      goodsFirstYearList.value = arr1;
      goodsSecondYearList.value = arr2;

      sluiceYear1.value = arr1[arr1.length-1];
      sluiceYear2.value = arr2[arr2.length-1];
      sluiceFirstYearList.value = arr1;
      sluiceSecondYearList.value = arr2;

      analysisDataFn1();
      analysisDataFn2();
    }
  });

  // goodsYear1.value = `${year - 1}年`;
  // // goodsFirstYearList.value = [`${year - 3}年`, `${year - 2}年`, `${year - 1}年`];
  // goodsYear2.value = `${year}年`;
  // goodsSecondYearList.value = [`${year - 2}年`, `${year - 1}年`, `${year}年`];

  // sluiceYear1.value = `${year - 1}年`;
  // // sluiceFirstYearList.value = [`${year - 3}年`, `${year - 2}年`, `${year - 1}年`];
  // sluiceYear2.value = `${year}年`;
  // sluiceSecondYearList.value = [`${year - 2}年`, `${year - 1}年`, `${year}年`];

  // if(year-3 < 2021){
  //   goodsFirstYearList.value = [`${year - 2}年`, `${year - 1}年`];
  //   sluiceFirstYearList.value = [`${year - 2}年`, `${year - 1}年`];
  // }else{
  //   goodsFirstYearList.value = [`${year - 3}年`, `${year - 2}年`, `${year - 1}年`];
  //   sluiceFirstYearList.value = [`${year - 3}年`, `${year - 2}年`, `${year - 1}年`];
  // }

  getShipLockNumFn();
  getShipLockRateFn();
  getShipLockDetailFn();
  // analysisDataFn1();
  // analysisDataFn2();
  goodsAnalysisChartFn();  
  // lockBaseFn();
});
</script>

<style lang='scss' scoped>
.channel-main {
  overflow-x: hidden;
  background: #ececee;
  padding:0 0 1px 0;
  .channel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 10px 20px;
    background-color: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
    .title {
      font-size: 18px;
      font-weight: 500;
      color: #262626;
    }
    .time {
      display: flex;
      align-items: center;
      color: #8c8c8c;
      font-size: 14px;
      font-weight: 500;
      img {
        width: 18px;
        height: 18px;
        padding-right: 5px;
      }
    }
  }

  .unit {
    display: flex;
    flex-direction: row-reverse;
    padding: 8px 20px 8px 0;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.45);
  }
  .item-list {
    padding-left: 20px;
    padding-right: 20px;
    .item {
      background: #ffffff;
      box-shadow: 0px 2px 8px 1px rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      opacity: 1;
      margin-bottom: 16px;
      padding-bottom: 16px;
      .icon {
        width: 16px;
        height: 16px;
        margin-right: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .frist-table {
        // margin: 0 16px;
        .frist-thead {
          margin-bottom: 10px;
          font-size: 12px;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.45);
          .frist-tr {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            .frist-td {
              width: 30%;
              text-align: center;
            }
          }
        }
        .frist-tbody {
          font-size: 14px;
          font-weight: 500;
          color: #595959;
          .frist-tr {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            .frist-td {
              width: 30%;
              text-align: center;
              .li{
                width: 8px;
                height: 8px;
                display: inline-block;
                display: block;
                border-radius: 0px 0px 0px 0px;
                opacity: 1;
                border-radius: 50%;
                margin-right: 6px;
              }
            }
          }
        }
      }
      .two-table {
        margin: 0 16px;
        .two-tbody {
          font-size: 14px;
          font-weight: 500;
          color: #595959;
          .two-tr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .li{
            width: 8px;
            height: 8px;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            border-radius: 50%;
            margin-right: 6px;
            }
            .two-td:first-of-type {
              margin-left: 20px;
            }
            .two-td:last-of-type {
              margin-right: 20px;
            }
          }
        }
      }
      .item-title {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        padding: 16px 0 16px 16px;
      }
      .line {
        height: 1px;
        background: #d9d9d9;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        margin-left: 16px;
        margin-right: 16px;
      }
      .content-bottom {
        margin-left: 16px;
        margin-right: 16px;
        margin-top: 16px;
        .bottom {
          background: rgba(45, 120, 237, 0.1);
          border-radius: 8px 8px 8px 8px;
          opacity: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px 12px;
          margin-bottom: 10px;
          .name {
            font-size: 14px;
            font-weight: 400;
            color: #000000;
          }
          .num {
            font-size: 16px;
            font-weight: 500;
            color: #2d78ed;
          }
        }
      }
      .amount{
        display: flex;        
        .info{
          width: 100%;
          height: 80px;
          background-image: url(../../static/images/ship-lock-bg.png);
          background-repeat: no-repeat;
          background-size: 100% 80px;
          display: flex;
          align-items: center;
          margin: 16px;
          img{
            width: 42px;
            height: 42px;
            margin: 0 16px;
          }
          .detail{
            display: flex;
            flex-direction: column;
            .name{
              font-size: 14px;
              color: #595959;
            }
            .value{
              font-size: 24px;
              font-weight: 800;
              color: #0473DE;
            }
          }
        }
      }
      .amount-content{
        display: flex;
        margin-left: 16px;
        align-items: center;
        .line-box{
          border-left: 1px solid #D9D9D9;
          width: 1px;
          height: 45px;
          margin-left: 25px;
          margin-right: 25px;
        }
        .name{
          font-size: 14px;
          font-weight: 500;
          color: #8C8C8C;}
          .num{
          font-size: 21px;
          font-weight: 500;
          color: #595959;
          margin-top: 8px;
          text-align: center;
        }
      }
      .item-content-n {
        font-size: 14px;
        font-weight: bold;
        padding: 16px;
        .top,
        .bottom {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .little {
            width: 35%;
            .name {
              font-size: 12px;
              font-weight: 400;
              color: #595959;
            }
            .num {
              font-size: 18px;
              font-weight: 500;
              color: #262626;
            }
          }
        }
        .top {
          margin-bottom: 16px;
        }
      }
      .item-two-content {
        display: flex;
        align-items: center;
        justify-content: center;
        .frist,
        .second {
          margin-top: 12px;
          width: 40%;
          border-radius: 40px;
          background: #f3f5fc;
          padding: 8px 0;
          text-align: center;
        }
        .active {
          background: #dde5fb;
          margin-top: 12px;
          width: 40%;
          border-radius: 40px;
          padding: 8px 0;
          text-align: center;
        }
      }
      .table-box {
        width: 320px;
        // max-height: 200px;
        overflow: scroll;
        scrollbar-width: none;
        scrollbar-color: transparent;
        -ms-overflow-style: none;        
        .table {          
          width: 320px;
          max-height: 200px;
          overflow: scroll;
          scrollbar-width: none;
          scrollbar-color: transparent;
          -ms-overflow-style: none;
          margin: 0px 10px 10px 10px;
          thead {
            tr {
              th:first-of-type {
                width: 80px;
              }
            }
          }
          th,
          td {
            padding: 2px;
            color: #595959;
            text-align: center;
          }
          .tbody {
            height: 100px; /* 设置表格体容器的高度 */
            overflow-y: auto; /* 启用垂直滚动条 */
            // width: 315px;
            width: 100%;
            overflow-x: auto;
          }
          .tbody {
            th,
            td {
              padding: 2px;
              color: #595959;
            }
          }
        }
      }
      .table-box::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }
      .table-box::-webkit-scrollbar-thumb {
        background-color: transparent;
      }
      .content {
        margin-left: 12px;
        margin-right: 12px;
        border-radius: 20px;
        padding: 20px 0px 15px 0px;
      }
      .chart-title {
        margin-top: 16px;
        margin-left: 24px;
        font-size: 14px;
        font-weight: 500;
        color: #262626;
        position: relative;
      }
      .chart-title::before {
        content: "";
        background-color: #2d78ed;
        position: absolute;
        top: 50%;
        left: -8px;
        height: 12px;
        width: 2px;
        transform: translateY(-50%);
      }
      .choose {
        display: flex;
        justify-content: flex-end;
        align-items:center;
        .left,
        .right {
          width: 94px;
          height: 22px;
          background: #ffffff;          
          opacity: 1;
          // border: 1px solid #d9d9d9;
          text-align: center;
          line-height: 22px;
          position: relative;
          .option {
            .choose-input {
              width: 94%;
              height: 92%;
              // border: none;
              text-align: center;
            }
            .choose-list {
              position: absolute;
              font-size: 12px;
              font-weight: 400;
              color: #595959;
              width: 94px;
              background: #fff;
              z-index: 999;
              .list {
                width: 94px;
                margin-top: -3px;
                border: 1px solid #d9d9d9;
                li {
                  list-style-type: none;
                }
              }
              .jt {
                content: "";
                width: 14px;
                height: 14px;
              }
            }
          }
        }
        .right {
          margin-right: 25px;
          margin-left: 8px;
        }
      }
      .chart {
        height: 280px;
        margin: 10px 0;
      }
      .choose-box {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 16px;
        padding: 4px 3px;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        border: 1px solid #d9d9d9;
        margin-left: 16px;
        margin-right: 16px;
        .choose-item {
          padding: 4px 20px;
          font-size: 14px;
          font-weight: 500;
          color: #000000;
        }
        .choose-active {
          background: #165dff;
          border-radius: 8px 8px 8px 8px;
          opacity: 1;
          padding: 4px 20px;
          font-size: 14px;
          font-weight: 500;
          color: #ffffff;
        }
      }
      .staticTable{
        overflow: auto;
        height: 200px;
        border: 1px solid #d9d9d9;
        border-bottom: 0;
        border-right: 0;
        margin: 10px;
        table {
          border-collapse: separate;
          table-layout: fixed;
          width: 100%;
          color: #595959;
        }
        td, th {
          border-right: 1px solid #d9d9d9;
          border-bottom: 1px solid #d9d9d9;
          box-sizing: border-box;
          width: 100px;
          height: 20px;
          text-align: center;
        }
        th {
          background-color: #f8f9fb;
        }
        /* 控制表头固定的核心代码 */
        thead tr th {
          position: sticky;
          top: 0; /* 第一列最上 */
        }
        th:nth-child(1),
        th:nth-child(2){
          z-index: 2;
          background-color: #f8f9fb;
        }
      }
    }
  }
  .source{
    text-align: center;
    padding: 5px 0;
    color: #8C8C8C;
    .name{
      margin-bottom: 5px;
    }
  }
  .dialog-title{
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
  }
  .dialog-content{
    text-align: center;
    padding: 0 20px 20px 20px;
    font-size: 14px;
    font-weight: 400;
  }
  :deep(.van-dialog__content){
    min-height: 118px;
    max-height: 293px;
    overflow-y: scroll;
  }
}
</style>